<template>
    <div class='log'>
        <div class='search'>
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-form-item label="模块名称">
                    <el-input v-model="search.name" placeholder="模块名称" style='width:100px'></el-input>
                </el-form-item>
                <el-form-item label="操作类型">
                    <el-select v-model="search.operator" placeholder="操作类型"  style='width:100px'>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="新增" value="新增"></el-option>
                    <el-option label="修改" value="修改"></el-option>
                    <el-option label="删除" value="删除"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作人">
                    <el-input v-model="search.username" placeholder="操作人"  style='width:100px'></el-input>
                </el-form-item>
                 <el-form-item label="操作日期">
                   <el-date-picker type="date" placeholder="操作日期" v-model="search.startDate"  style='width:140px'  value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="search.content" placeholder="内容"  style='width:200px'></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="goSearch">查询</el-button>
                </el-form-item>
            </el-form> 
        </div>
        <el-table
            height="100%"
            :data="tableData"
            v-loading="loading"
            style="width: 100%">
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-card class="box-card item" v-for="(item,index) in props.row.child" :key="index" >
                    <div slot="header" class="clearfix ">
                        <span>{{ item.operationname }}{{ item.objectname }}</span>
                        
                    </div>
                    <div class='item_content'>
                        <div  v-for="(child,index2) in item.child" :key="index2" >
                            <template v-if="getFieldisLog(item.tablealias,child.attributealias)">
                                <div v-if="item.operationname=='新增'"><div class='item_td'>{{getField(item.tablealias,child.attributealias)}}</div><div class='item_td2'>{{child.newvalue|unescape}}</div></div>
                                <div v-if="item.operationname=='删除'"><div class='item_td'>{{getField(item.tablealias,child.attributealias)}}</div><div class='item_td2'>{{child.newvalue|unescape}}</div></div>
                                <div v-if="item.operationname=='修改'"><div class='item_td'>{{getField(item.tablealias,child.attributealias)}}</div><div class='item_td2'>从【{{child.oldvalue|unescape}}】改成【{{child.newvalue|unescape}}】</div></div>
                            </template>
                           
                        </div>
                    </div>
                </el-card>
                
                
               
            </template>
            </el-table-column>
            <el-table-column
            width="100px"
            label="模块名称"
            prop="operationalias">
            </el-table-column>
             <el-table-column
            label="操作类型"
            width="80px"
            prop="operationname">
            </el-table-column>
            <el-table-column
            label="操作人"
            width="100px"
            prop="operator">
            </el-table-column>
            <el-table-column
            label="操作内容"
            prop="comment"
            >
           
            </el-table-column>
             <el-table-column
            width="180px"
            label="操作时间"
            prop="operationtime">
            </el-table-column>
        </el-table>
        <div style='text-align:right'>
            <el-pagination
            background
            layout="prev, pager, next"
            @size-change="changeSize"
            @current-change="changeCurrent"
            :total="totalSize">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData:[],
            loading:false,
            search:{
                name:"",
                operator:"",
                username:"",
                startDate:"",
                content:""
            },
             curPage:1,
             totalSize:0,
             fieldMap:{}
        }
    },
    created(){
        this.loadField();
    },
    methods:{
        changeCurrent(page){
            console.log(page,"page==========")
            this.curPage=page;
            this.loadData();
        },
        goSearch(){
            this.curPage=1;
            this.loadField();
        },
        loadData(){
            this.loading=true;
            this.$post("","/ObjectLoggerServer/log/getLogList",{
                sCode:localStorage.getItem("sCode"),
                name:escape(this.search.name),
                operator:escape(this.search.operator),
                username:escape(this.search.username),
                startDate:escape(this.search.startDate),
                content:escape(this.search.content),
                curPage:""+this.curPage
            }).then(data=>{
                
                this.tableData=data.data;
                this.totalSize=Number(data.totalSize)
                this.loading=false;
            })
        },
        loadField(){
            
            this.$post("","/api/api/view/getFieldJson",{}).then(data=>{
                this.fieldMap=data;
                this.loadData();
            })
        },
        
        getFieldisLog(tablealias,value){
            value=unescape(value);
            let json=this.fieldMap[tablealias+".json"];
            let isLog=true;
           
            if(json){
                for(let i=0;i<json.length;i++){
                    let field=json[i].field;
                    let isLog_=json[i].isLog;
                    
                    let logName=json[i].logname;
                    let name=json[i].name;

                    if(field==value){
                        if(isLog_=="否"){
                            isLog=false;
                        
                        }
                        break;
                    }
                }
            }
            return isLog;
        },
        getField(tablealias,value){
            value=unescape(value);
            let json=this.fieldMap[tablealias+".json"];
            let newValue="";
            if(json){
                console.log(json)
                for(let i=0;i<json.length;i++){
                    let field=json[i].field;
                    let isLog=json[i].isLog;
                    let logName=json[i].logname;
                    let name=json[i].name;
                    if(field==value){
                        newValue=logName==""||logName==undefined ? name:logName;
                        break;
                    }
                }
            }
            
            newValue=newValue=="" ? value:newValue;
            return newValue;
        }
    },
    filters: {
        unescape: function (value) {
            return unescape(value);
        }
    }
}
</script>
<style scoped>
.log{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
    overflow:hidden;
}
.el-table{
    flex:1;
    overflow:auto;
}
.search{
    width:100%;
    padding:10px;
    border-bottom:1px solid #ddd;
}
.item{
    border:1px solid #ddd;
    margin:10px;
}
.item_content{

    padding:15px;
}
.box-card >>> .el-card__header{
    background:cornflowerblue;
    color:#fff;
}
.item_td{
    width:150px;
    display:inline-block;
    border:1px solid #ddd;
    background:#fafafa;
    padding-left:8px;
    padding-top:3px;
    padding-bottom:3px;
}
.item_td2{
    border:1px solid #ddd;
    padding-left:8px;
    display:inline-block;
    width:700px;
    padding-top:3px;
    padding-bottom:3px;
    border-left:0;
}
</style>